<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;"><img style="height: 30px;" src="../assets/img/esin.png" alt="" /></a>
        <a class="site-navbar__brand-mini" href="javascript:;"><img style="height: 30px;" src="../assets/img/esin.png" alt="" /></a>

      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <!-- 左侧菜单栏 -->
      <el-menu class="site-navbar__menu" mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold"><icon-svg name="zhedie"></icon-svg></el-menu-item>
      </el-menu>
      <!-- 滚动条 -->
      <div class="site-navbar__scroll" style="display:flex;float: left;height: 51px;width: calc(100% - 400px - 100px);">
        <div style="display: flex; padding-right: 10px;float: left;line-height: 50px; white-space: noewarp;">
          <img
            src=""
            class="img-responsive"
            style="width: 30px;float: left;margin-right: 10px;"
          />
          <span style="text-decoration: none;">{{ $t('MainNavbar.heavyweightNews') }}：</span>
        </div>
        <div class="setesponsiv" style="float: left;height: 50px;line-height: 50px;">
          <marquee>
            <a href="javascript:void(0)" rel="nofollow" style="margin-right: 100px;text-decoration: none;">{{ importantLog }}</a>
          </marquee>
        </div>
      </div>
      <!-- 右侧菜单栏 -->
      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
        <el-menu-item index="2">
          <template slot="title">
            <el-badge>
              <a :title="$t('MainNavbar.HelpDocuments')" href="#/help"  style="font-size: 12px;display: inline;" class="el-icon-question" target="_blank">在线求助</a>
            </el-badge>
          </template>
        </el-menu-item>
        <el-menu-item index="4" @click="noticeAlert()">
          <template slot="title">
            <el-badge is-dot :value="sysLogCounts + updateLogCounts + serviceLog.length" :max="99">
              <a :title="$t('MainNavbar.messageNotification')" href="javascript:;" style="font-size: 12px;display: inline;" class="el-icon-message-solid">消息</a>
            </el-badge>
          </template>
        </el-menu-item>

        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link" style="font-size: 12px;">
              <img style="width:20px;" src="~@/assets/img/avatar.png" :alt="userName" />
              {{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="wccodeBtn()">{{ $t('MainNavbar.MerchantQRCode') }}</el-dropdown-item>
              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('MainNavbar.ChangePassword') }}</el-dropdown-item>
              <el-dropdown-item @click.native="shiftWork()">交接班</el-dropdown-item>
              <el-dropdown-item @click.native="switchHotel()">切换门店</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">{{ $t('MainNavbar.SignOut') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
    
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <mainwxcode v-if="mainwxcodeVisible" ref="mainwxcode"></mainwxcode>
    <!-- 抽屉消息通知 -->
    <el-drawer title="我是标题" :visible.sync="drawerNotice" :with-header="false" :modal="false" :size="'300'">
      <!-- 内容 -->
      <el-tabs v-model="activeName" class="navbar-notice" @tab-click="handleClick" style="padding: 20px;padding-top: 10px;">
        <el-tab-pane label="业务通知" style="" name="first">
          <ul v-if="serviceLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in serviceLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=first">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="serviceLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoBusinessNotice') }}</p>
          <a href="#/app-noticelog/index?activeName=first">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
        <el-tab-pane label="系统消息" name="second">
          <ul v-if="sysLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in sysLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=second">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="sysLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoSystemMessageYet') }}</p>
          <a href="#/app-noticelog/index?activeName=second">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
        <el-tab-pane label="更新日志" name="third">
          <ul v-if="updateLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in updateLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=third">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="updateLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoUpdateLog') }}</p>
          <a href="#/app-noticelog/index?activeName=third">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <shiftWork v-if="shiftWorkVisible" ref="shiftWork"></shiftWork>

    <!-- 切换酒店-->
    <Thotelchoose ref="Thotelchoose" v-if="hotel.ThotelchooseVisible"></Thotelchoose>
  </nav>
</template>

<script>
import UpdatePassword from './main-navbar-update-password';
import Thotelchoose from './popup/hotel/choose-the-format';
import mainwxcode from './main-wx-code';
import { clearLoginInfo } from '@/utils';
import shiftWork from './modules/app/thotelshiftover/thotelshiftover'
export default {
  data() {
    return {
      updatePassowrdVisible: false,
      drawerNotice: false,
      activeName: 'first',
      sysLog: [],
      updateLog: [],
      serviceLog: [],
      importantLog: '',
      simportantLogApi: '',
      sysLogCounts: 0,
      updateLogCounts: 0,
      mainwxcodeVisible: false,
      //交班
      shiftWorkVisible: false,
      hotel:{
        ThotelchooseVisible:false,
      }
    };
  },
  components: {
    UpdatePassword,
    mainwxcode,
    shiftWork,
    Thotelchoose
  },
  computed: {
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit('common/updateSidebarFold', val);
      }
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit('common/updateMainTabs', val);
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      }
    }
  },
  mounted: function() {
    this.importantLogApi();
    this.importantLogApi2();
    this.notReedSysLog();
    this.notReedUpdateLog();
    this.notReedServiceLog();
    this.simportantLogApi = setInterval(() => {
      this.importantLogApi();
      this.notReedSysLog();
      this.notReedUpdateLog();
      this.notReedServiceLog();
    }, 10 * 1000);
  },
  methods: {
    switchStores(){
      this.$router.replace({
        name: "choosetheformat"
      });
    },
    toggleLang(lang) {
      if (lang == 'zh') {
        localStorage.setItem('locale', 'zh');
        this.$i18n.locale = localStorage.getItem('locale');
        this.$message({
          message: '切换为中文！',
          type: 'success'
        });
      } else if (lang == 'en') {
        localStorage.setItem('locale', 'en');
        this.$i18n.locale = localStorage.getItem('locale');
        this.$message({
          message: 'Switch to English!',
          type: 'success'
        });
      }
    },
    openLoginAlert() {
      this.$alert('需要您重新登录', '会话过期', {
        confirmButtonText: '确定',
        callback: action => {}
      });
    },
    //查询未读业务通知
    notReedServiceLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticeservice/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 99,
          state: 1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.serviceLog = data.page.list;
        } else {
          this.serviceLog = [];
          clearInterval(this.simportantLogApi);
          // this.simportantLogApi = null;
          // this.openLoginAlert();
        }
      });
    },
    //登录系统
    importantLogApi2() {
      this.$http({
        url: this.$http.adornUrl('/sys/login2'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {});
    },
    //查询重磅消息
    importantLogApi() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticesyslog/important_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.importantLog = data.content;
        }
      });
    },
    noticeAlert() {
      this.drawerNotice = true;
      this.notReedSysLog();
      this.notReedUpdateLog();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //未读系统消息列表
    notReedSysLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticesyslog/not_reed_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.sysLog = data.lists;
          this.sysLogCounts = data.sysLogCounts;
        } else {
          clearInterval(this.simportantLogApi);
        }
      });
    },
    //未读系统更新日志
    notReedUpdateLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticeupdatelog/not_reed_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.updateLog = data.lists;
          this.updateLogCounts = data.updateLogCounts;
        }
      });
    },
    switchHotel(){
      this.hotel.ThotelchooseVisible = true;
      this.$nextTick(() => {
        this.$refs.Thotelchoose.init();
      });
    },
    wccodeBtn() {
      this.mainwxcodeVisible = true;
      this.$nextTick(() => {
        this.$refs.mainwxcode.init();
      });
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 交接班
    shiftWork(){
      this.shiftWorkVisible=true;
      this.$nextTick(()=>{
        this.$refs.shiftWork.init();
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({ data }) => {
            clearLoginInfo();
            this.$router.push({ name: 'login' });
            if (data && data.code === 0) {
              
            }else{
              this.$message.error(data.msg)
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.site-navbar__scroll {
  display: flex;
  color: #333;
  .setesponsiv {
    width: 50%;
  }
  marquee a {
    color: #333;
  }
  span {
    white-space: nowrap;
  }
}
@media only screen and (min-width: 1180px) {
  .site-navbar__scroll .setesponsiv {
    width: 50%;
  }
}
</style>
